<template>
  <div class="login-test-page">
    <div class="container">
      <h1>登录状态测试页面</h1>
      
      <div class="status-section">
        <h2>当前状态</h2>
        <div class="status-item">
          <strong>前端登录状态:</strong> 
          <span :class="userStore.isLoggedIn ? 'success' : 'error'">
            {{ userStore.isLoggedIn ? '已登录' : '未登录' }}
          </span>
        </div>
        <div v-if="userStore.isLoggedIn" class="status-item">
          <strong>用户昵称:</strong> {{ userStore.userInfo.nickname }}
        </div>
        <div v-if="userStore.isLoggedIn" class="status-item">
          <strong>用户ID:</strong> {{ userStore.userInfo.userId }}
        </div>
        <div class="status-item">
          <strong>后端登录状态:</strong> 
          <span :class="backendLoginStatus ? 'success' : 'error'">
            {{ backendLoginStatus ? '已登录' : '未登录' }}
          </span>
        </div>
      </div>

      <div class="actions-section">
        <h2>操作</h2>
        <div class="action-buttons">
          <button @click="checkBackendLogin" class="btn btn-primary">检查后端登录状态</button>
          <button @click="openLoginModal" class="btn btn-success">打开登录弹窗</button>
          <button @click="testSaveProfile" class="btn btn-warning">测试保存功能</button>
          <button @click="logout" class="btn btn-danger">退出登录</button>
        </div>
      </div>

      <div class="logs-section">
        <h2>操作日志</h2>
        <div class="logs-container">
          <div v-for="(log, index) in logs" :key="index" class="log-item">
            <span class="log-time">{{ log.time }}</span>
            <span class="log-message">{{ log.message }}</span>
          </div>
        </div>
      </div>

      <div class="instructions-section">
        <h2>使用说明</h2>
        <ol>
          <li>首先点击"检查后端登录状态"查看当前是否已登录</li>
          <li>如果未登录，点击"打开登录弹窗"进行登录</li>
          <li>登录成功后，再次检查后端登录状态</li>
          <li>确认登录后，点击"测试保存功能"测试ProfileSettings的保存功能</li>
          <li>查看控制台和操作日志了解详细信息</li>
        </ol>
      </div>
    </div>

    <!-- 登录模态框 -->
    <LoginModal 
      :show="showLoginModal" 
      @close="closeLoginModal"
      @login-success="handleLoginSuccess"
    />
  </div>
</template>

<script>
import { useUserStore } from '@/stores/user.js'
import { userAPI } from '@/api/index.js'
import LoginModal from '@/components/LoginModal.vue'

export default {
  name: 'LoginTestPage',
  components: {
    LoginModal
  },
  setup() {
    const userStore = useUserStore()
    return {
      userStore
    }
  },
  data() {
    return {
      showLoginModal: false,
      backendLoginStatus: false,
      logs: []
    }
  },
  mounted() {
    this.userStore.initUserState()
    this.addLog('页面加载完成')
    this.checkBackendLogin()
  },
  methods: {
    addLog(message) {
      const now = new Date()
      const time = now.toLocaleTimeString()
      this.logs.unshift({ time, message })
      if (this.logs.length > 20) {
        this.logs.pop()
      }
    },

    async checkBackendLogin() {
      this.addLog('开始检查后端登录状态...')
      try {
        const response = await userAPI.getCurrentUser()
        console.log('后端登录状态检查结果:', response)
        
        if (response && response.code === 0) {
          this.backendLoginStatus = true
          this.addLog(`后端登录状态: 已登录 (用户: ${response.data.nickname || response.data.userAccount})`)
        } else {
          this.backendLoginStatus = false
          this.addLog('后端登录状态: 未登录')
        }
      } catch (error) {
        console.error('检查后端登录状态失败:', error)
        this.backendLoginStatus = false
        this.addLog(`后端登录状态检查失败: ${error.message}`)
      }
    },

    openLoginModal() {
      this.showLoginModal = true
      this.addLog('打开登录弹窗')
    },

    closeLoginModal() {
      this.showLoginModal = false
      this.addLog('关闭登录弹窗')
    },

    async handleLoginSuccess(info) {
      // 登录成功后，用户信息已经在LoginModal中通过fetchUserInfo获取了
      this.showLoginModal = false
      this.addLog(`登录成功: ${info.nickname}`)
      // 重新检查后端登录状态
      setTimeout(() => {
        this.checkBackendLogin()
      }, 1000)
    },

    async testSaveProfile() {
      this.addLog('开始测试保存功能...')
      try {
        const updateData = {
          nickname: this.userStore.userInfo.nickname + '_测试',
          userAvatar: this.userStore.userInfo.avatar
        }
        
        console.log('测试保存数据:', updateData)
        const response = await userAPI.updateUserInfo(updateData)
        
        if (response && response.code === 0) {
          this.addLog('保存功能测试成功')
          // 恢复原来的昵称
          const restoreData = {
            nickname: this.userStore.userInfo.nickname,
            userAvatar: this.userStore.userInfo.avatar
          }
          await userAPI.updateUserInfo(restoreData)
          this.addLog('已恢复原昵称')
        } else {
          this.addLog(`保存功能测试失败: ${response?.message || '未知错误'}`)
        }
      } catch (error) {
        console.error('保存功能测试失败:', error)
        this.addLog(`保存功能测试失败: ${error.message}`)
      }
    },

    logout() {
      this.userStore.logout()
      this.backendLoginStatus = false
      this.addLog('已退出登录')
    }
  }
}
</script>

<style scoped>
.login-test-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

h2 {
  color: #555;
  margin-bottom: 15px;
  border-bottom: 2px solid #007bff;
  padding-bottom: 5px;
}

.status-section, .actions-section, .logs-section, .instructions-section {
  margin-bottom: 30px;
}

.status-item {
  margin-bottom: 10px;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 4px;
}

.success {
  color: #28a745;
  font-weight: bold;
}

.error {
  color: #dc3545;
  font-weight: bold;
}

.action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-success {
  background-color: #28a745;
  color: white;
}

.btn-success:hover {
  background-color: #1e7e34;
}

.btn-warning {
  background-color: #ffc107;
  color: #212529;
}

.btn-warning:hover {
  background-color: #e0a800;
}

.btn-danger {
  background-color: #dc3545;
  color: white;
}

.btn-danger:hover {
  background-color: #c82333;
}

.logs-container {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  background: #f8f9fa;
}

.log-item {
  margin-bottom: 5px;
  font-family: monospace;
  font-size: 12px;
}

.log-time {
  color: #666;
  margin-right: 10px;
}

.log-message {
  color: #333;
}

.instructions-section ol {
  padding-left: 20px;
}

.instructions-section li {
  margin-bottom: 8px;
  line-height: 1.5;
}
</style>